<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				padding: 0;
				margin: 0;
				font-family: 'microsoft yahei','Helvetica',simhei,simsun,sans-serif;
				background-color: #f7f7f7;
			}
			a{
				text-decoration: none;
			}
			.playerTitle{
				width: 100%;
				margin: 0 auto;
				line-height: 100px;
				font-size: 40px;
				text-align: center;
			}
			.player{
				width: 720px;
				height: 360px;
				margin: 0 auto;
				background: url("./img/loading.gif") center no-repeat;
				background-size: 30px;
				position: relative;
			}
			video{
				height: 100%;
				margin: 0 auto;
				display: none;
			}
			.controls}{
				width: 45rem;
				height: 2.5rem;
				position: absolute;
				left: 0rem;
				bottom: -40px;
				background-color: #000;
			}
			.controls > .switch{
				width: 1.25rem;
				height: 1.25rem;
				display: block;
				font-size: 1.25rem;
				color: #fff;
				position: absolute;
				left: 0.625rem;
				top: 0.625rem;
			}
			.controls > .expand{
				width: 1.25rem;
				height: 1.25rem;
				display: block;
				font-size: 1.25rem;
				color: #fff;
				position: absolute;
				left: 0.625rem;
				top: 0.625rem;
			}
			.controls > .progress{
				width: 430px;
				height: 1.25rem;
				position: absolute;
				left: 2.5rem;
				bottom: 0.9375rem;
				background-color: #555;
			}
			.controls > .progress>.bar{
				width: 100%;
				height: 100%;
				border-radius: 0.1875rem;
				cursor: pointer;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 999;
			}
			.controls > .progress>.loaded{
				width: 100%;
				height: 100%;
				border-radius: 0.1875rem;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			.controls > .progress>.elapse{
				width: 0%;
				height: 100%;
				border-radius: 0.1875rem;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 3;
			}
			.controls > .time{
				height: 1.25rem;
				position: absolute;
				left: 30.625rem;
				top: 0.625rem;
				color: #fff;
				font-size: 0.875rem;
			}
		</style>
	</head>
	<body>
		<h3 class="playerTitle">视频播放器</h3>
		<div class="player">
			<video src="../01.基础篇/file/01-HTML5CSS3-阶段任务说明.mp4"></video>
			<div class="controls">
				<a href="javascript:;" class="switch fa fa-play"></a>
				<a href="javascript:;" class="expand fa fa-expand"></a>
				<div class="progress">
					<div class="bar"></div>
					<div class="loaded"></div>
					<div class="elapse"></div>
				</div>
				<div class="time">
					<span class="currentTime">00:00:00</span>
					\
					<span class="totaTime">00:00:00</span>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js">
			
			
		</script>
	</body>
</html>